<!DOCTYPE html>
<html>

<meta charset="utf-8">
<head>
    <title data-localize="test.title">测试机</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <style type="text/css">
        p {
            margin: 0;
        }

        .u-line {
            margin: 0 auto;
            width: 770px;
            height: 600px;
            overflow: hidden;
        }

        .u-road {
            position: relative;
            height: 200px;
            width: 890px;
            float: right;
            margin-top: 110px;
            -webkit-transform: rotateY(180deg);
        }

        .u-road p {
            -webkit-transform: rotateY(180deg);
        }

        .u-road span {
            display: inline-block;
            -webkit-transform: rotateY(180deg);
        }

        .opposite {
            margin-top: 0;
            -webkit-transform: rotateX(180deg) rotateY(180deg);
        }

        .opposite p {
            -webkit-transform: rotateX(180deg) rotateY(180deg);
        }

        .opposite span {
            display: inline-block;
            -webkit-transform: rotateX(180deg) rotateY(180deg);
        }

        .u-road-opposite {
            position: relative;
            height: 200px;
            width: 770px;
            float: left;
            margin-top: 110px;
            -webkit-transform: rotateY(180deg);
        }

        .u-roadcon {
            position: relative;
            float: left;
        }

        .u-roadcon:after {
            content: '';
            display: block;
            clear: both;
        }

        .u-road:after {
            content: '';
            display: block;
            clear: both;
        }

        .u-road-opposite:after {
            content: '';
            display: block;
            clear: both;
        }

        .u-track {
            position: absolute;
            height: 28px;
            width: 100%;
            left: 0;
            top: 85px;
            border-top: 1px solid #cecece;
            border-bottom: 1px solid #cecece;
        }

        .u-outtrack {
            position: absolute;
            height: 52px;
            width: 28px;
            left: 550px;
            top: 33px;
            border-left: 1px solid #cecece;
            border-right: 1px solid #cecece;
        }

        .u-adjust2 {
            position: absolute;
            left: 410px;
            width: 71px;
            height: 20px;
        }

        .u-adjust1 {
            position: absolute;
            left: 650px;
            width: 71px;
            height: 20px;
        }

        .u-test {
            position: absolute;
            left: 290px;
            top: -35px;
            width: 68px;
            height: 68px;
            background: #eef2f7;
            border-radius: 4px;
            border: 1px solid #29abe2;
            z-index: 10;
        }

        .u-test p {
            margin: 0;
            text-align: center;
            font-size: 16px;
            line-height: 68px;
        }

        /*animations*/
        .stop {
            animation-play-state: paused;
        }

    </style>
    <link rel="stylesheet" type="text/css" href="css/machine.css">
</head>
<body>
<div class='u-head'>
    <div class="u-headcon">
        <a href="index.html">
            <div class="u-mainpage" data-localize="back">回到首页</div>
        </a>
        <h3 data-localize="test.title">测试机</h3>
        <div class="changeLang">
            <p class="u-lang"><span>中文</span><span>English</span></p>
            <div isopen="true" class="changeLangBtn"></div>
        </div>
    </div>
</div>
<div class="u-infos">
    <h2 data-localize="test.info_title">状态区域</h2>
    <div class="u-errorlist">
        <h3 data-localize="yichang">异常一览：</h3>
        <div class="u-errorlistcon">
        </div>
    </div>
    <p class="status"><span data-localize="test.running">运行状态：</span><span class="u-cube t-status"></span></p>
</div>
<div class="t-con">
    <div class="u-line">
        <div class="u-boxcon needleft stop u-boxconspe" id="u-boxe">
            <div class="u-box u-boxe"></div>
        </div>
        <div class="u-road lineB">
            <div class="u-track"></div>
            <div class="u-roadcon left">
                <div class="u-boxcon needleft">
                    <div class="u-box u-box14" id="u-box14"><p class="u-box-p14"></p></div>
                    <div class="u-handbar u-handbar2" id="u-handbar2">
                        <div class="u-hand"></div>
                    </div>
                </div>
                <div class="u-boxcon needleft">
                    <div class="u-box u-box13"><p class="u-box-p13"></p></div>
                </div>
                <div class="u-boxcon needleft">
                    <div class="u-box u-box12"><p class="u-box-p12"></p></div>
                </div>
                <div class="u-boxcon needleft boxcon11 recieveboxA">
                    <div class="u-box u-box11"><p class="u-box-p11"></p></div>
                </div>
            </div>
            <div class="u-machine" id="u-machine">
                <div class="u-boxcon needrotatee">
                    <div class="u-box u-box9"><p class="u-box-p9"></p></div>
                </div>
                <div class="u-boxcon needrotatee"></div>
                <div class="u-boxcon needrotatee"></div>
                <div class="u-boxcon needrotatee" id="rotatea">
                    <div class="u-box u-box10 u-box-change"><p class="u-box-p10"></p></div>
                </div>
            </div>
            <div class="u-roadcon right">
                <div class="u-adjust1 u-adjusttop"><img src="image/adjust.png" width="100%"></div>
                <div class="u-adjust1 u-adjustbottom"><img src="image/adjust.png" width="100%"></div>
                <div class="u-adjust2 u-adjusttop"><img src="image/adjust.png" width="100%"></div>
                <div class="u-adjust2 u-adjustbottom"><img src="image/adjust.png" width="100%"></div>
                <div class="u-boxcon needleft">
                    <div class="u-box u-box5"><p class="u-box-p5"></p></div>
                </div>
                <div class="u-boxcon needleft">
                    <div class="u-box u-box4"><p class="u-box-p4"></p></div>
                </div>
                <div class="u-boxcon needleft">
                    <div class="u-box u-box3"><p class="u-box-p3"></p></div>
                </div>
                <div class="u-boxcon needleft">
                    <div class="u-box u-box2"><p class="u-box-p2"></p></div>
                </div>
                <div class="u-boxcon needleft">
                    <div class="u-box u-box1" id="u-box1"><p class="u-box-p1"></p></div>
                    <div class="u-handbar u-handbar1" id="u-handbar1">
                        <div class="u-hand"></div>
                    </div>
                </div>
                <div class="u-boxcon needleft">
                    <div class="u-box" style="background: #ddd9c3"></div>
                </div>
            </div>
            <div class="u-scan">
                <img src="image/scan.png" width="100%">
                <div class="u-scanline" id="u-scanline"></div>
            </div>123
            <div class="u-charge u-charge1"><p class="w1"></p><span class="u-weight1"></span><span
                    data-localize="print.weight">重量：</span></div>
            <div class="u-charge u-charge2"><p class="w2"></p></div>
            <div class="u-charge u-charge3"><p class="w3"></p><span class="u-weight2"></span><span
                    data-localize="print.weight">重量：</span></div>
        </div>
        <!--<div class="u-road opposite lineA">-->
        <!--<div class="u-track"></div>-->
        <!--<div class="u-roadcon left">-->
        <!--<div class="u-boxcon needleft"><div class="u-box u-box14" id="u-box14-b"><p class="u-box-p14"></p></div><div class="u-handbar u-handbar2" id="u-handbar2-b"><div class="u-hand"></div></div></div>-->
        <!--<div class="u-boxcon needleft"><div class="u-box u-box13"><p class="u-box-p13"></p></div></div>-->
        <!--<div class="u-boxcon needleft"><div class="u-box u-box12"><p class="u-box-p12"></p></div></div>-->
        <!--<div class="u-boxcon needleft"><div class="u-box u-box11"><p class="u-box-p11"></p></div></div>-->
        <!--<div class="u-boxcon needleft"><div class="u-box u-box10"><p class="u-box-p10"></p></div></div>-->
        <!--<div class="u-boxcon needleft"><div class="u-box u-box9"><p class="u-box-p9"></p></div></div>-->
        <!--<div class="u-boxcon needleft"><div class="u-box u-box8"><p class="u-box-p8"></p></div></div>-->
        <!--<div class="u-boxcon needleft"><div class="u-box u-box7"><p class="u-box-p7"></p></div></div>-->
        <!--<div class="u-boxcon needleft recieveboxB"><div class="u-box u-box6"><p class="u-box-p6"></p></div></div>-->
        <!--</div>-->
        <!--<div class="u-machine" id="u-machine">-->
        <!--<div class="u-boxcon needrotatee"><div class="u-box u-box4"><p class="u-box-p4"></p></div></div>-->
        <!--<div class="u-boxcon needrotatee"></div>-->
        <!--<div class="u-boxcon needrotatee"></div>-->
        <!--<div class="u-boxcon needrotatee" id="rotatea-b"><div class="u-box u-box5 u-box-change"><p class="u-box-p5"></p></div></div>-->
        <!--</div>-->
        <!--<div class="u-roadcon right">-->
        <!--<div class="u-adjust1 u-adjusttop"><img src="image/adjust.png" width="100%"></div>-->
        <!--<div class="u-adjust1 u-adjustbottom"><img src="image/adjust.png" width="100%"></div>-->
        <!--<div class="u-adjust2 u-adjusttop"><img src="image/adjust.png" width="100%"></div>-->
        <!--<div class="u-adjust2 u-adjustbottom"><img src="image/adjust.png" width="100%"></div>-->
        <!--<div class="u-boxcon needleft"><div class="u-box u-box3"><p class="u-box-p3"></p></div></div>-->
        <!--<div class="u-boxcon needleft"><div class="u-box u-box2"><p class="u-box-p2"></p></div></div>-->
        <!--<div class="u-boxcon needleft"><div class="u-box u-box1" id="u-box1-b"><p class="u-box-p1"></p></div><div class="u-handbar u-handbar1" id="u-handbar1-b"><div class="u-hand"></div></div></div>-->
        <!--<div class="u-boxcon needleft"><div class="u-box" style="background: #ddd9c3"></div></div>-->
        <!--</div>-->
        <!--<div class="u-scan u-scan-b">-->
        <!--<img src="image/scan.png" width="100%">-->
        <!--<div class="u-scanline" id="u-scanline-b"></div>-->
        <!--</div>-->
        <!--<div class="u-charge u-charge1"><p class="w1"></p><span class="u-weight1"></span><span data-localize="print.weight">重量：</span></div>-->
        <!--<div class="u-charge u-charge2"><p class="w2"></p></div>-->
        <!--<div class="u-charge u-charge3"><p class="w3"></p><span class="u-weight2"></span><span data-localize="print.weight">重量：</span></div>-->
        <!--</div>-->
    </div>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.localize.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/language_cookie.js" type="text/javascript" charset="utf-8"></script>


<script type="text/javascript">
    $('.u-box5').addClass('move');
</script>
</body>
</html>